<template>
    <el-container>
        <el-container style="height: 520px">
            <el-header>
                <el-form
                    inline
                    label-width="49px"
                    :model="queryList"
                    style="margin-top: 5px; width: 100%"
                >
                    <el-date-picker
                        style="width: 300px"
                        v-model="queryList.applyDates"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        unlink-panels="true"
                        start-placeholder="开始要货时间"
                        end-placeholder="结束要货时间"
                        :default-time="defaultTime"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入要货编号---"
                        v-model="queryList.applyOrderCode"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料编码---"
                        v-model="queryList.materialCode"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="queryList.materialName"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                   
                    <el-button type="primary" @click="$refs.mytable.getData()">查询</el-button>
                </el-form>
            </el-header>
            <el-foot>
                <scTable
                    ref="mytable"
                    :tree-props="{ checkStrictly: false,children: 'applyOrderItems'  }"
                    :queryType="queryType"
                    checkStrictly
                    :queryList="queryList"
                    :column="columnList"
                    :sort-orders="['ascending', 'descending']"
                    v-model:selection="selectedRows"
                    @selection-change="handleSelectionChange"
                    row-key="key"
                    stripe
                    show-summary
                    remoteSummary
                    style="height: 450px; min-width: 420"
                    :row-class-name="tableRowClassName"
                >
                    <el-table-column type="selection" width="50">
                        <template #default="scope">
                            <el-checkbox
                                v-model="scope.row.isSelect"
                                @change="toggleSelection(scope.row)"
                            ></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="要货时间" prop="applyDate" width="180" sortable>
                        <template #default="scope">{{scope.row.applyDate?.slice(0,10)}}</template>
                    </el-table-column>
                    <el-table-column label="要货编号" prop="applyOrderCode" width="180" sortable></el-table-column>
                    <el-table-column prop="materialName" label="要货物料" min-width="240"></el-table-column>
                    <el-table-column prop="totalAmount" label="单据金额" width="140" sortable>
                        <template #default="scope">{{scope.row.totalAmount?.toFixed(2)}}</template>
                    </el-table-column>
                    <el-table-column prop="statusDesc" label="单据状态" width="140" sortable></el-table-column>
                    <el-table-column prop="remarks" label="备注" width="220" sortable></el-table-column>
                </scTable>
            </el-foot>
        </el-container>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
import { log } from "@antv/g2plot/lib/utils";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "apply-order/history-tree-pages" },
        defaultQueryList: { type: Object, default: {} },
    },
    data() {
        return {
            selectionRows: [],
            //pkList: ['applyOrderItemId'],
            attrList: {},
            valueList: {},
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            group: [],
            optionsUomCode: [],
            materialTypeTree: [],
            selectedRows: [],
            defaultTime:  [
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ] 
        };
    },
    methods: {
        //表格选择后回调事件
        selectionChange(selection) {
            console.log("selection", selection);
            this.selectionRows = selection;
        },
        //触发选择
        toggleSelection(row) {
            const children = row.applyOrderItems || [];
            if (children.length > 0) {
                children.map((item) => {
                    console.log("item", item);
                    item.isSelect = row.isSelect;
                    if (item.isSelect) {
                        this.selectionRows.push(item);
                    } else {
                        this.selectionRows.splice(item, 1);
                    }
                });
            } else {
                //设置父节点状态
                var parentKey = row.applyOrderId + "_0";
                var parentObj = this.$refs.mytable.form.tableData.filter(
                    (p) => p.key == parentKey
                );
                parentObj[0].isSelect = true;

                //判断子类如果都是false
                const children = parentObj[0].applyOrderItems || [];
                var checkCount = children.filter((p) => p.isSelect == true);
                if (checkCount == 0) {
                    parentObj[0].isSelect = false;
                }

                if (row.isSelect) {
                    this.selectionRows.push(row);
                } else {
                    this.selectionRows.splice(row, 1);
                }
            }

            console.log("选中节点", this.selectionRows);
        },

        handleSelectionChange(selection) {
            // console.log("selection",selection);
            this.selected = selection;
            this.selectedRows = selection;
            // 处理选择状态
            this.updateSelection(selection);
        },
        // 选中背景色
        tableRowClassName({ row, rowIndex }) {
            if (this.selectionRows.includes(row)) {
                
                //return "selected-row-color";
            }
            return "";
        },
        updateSelection(selection) {
            const selectedIds = new Set(
                selection
                    .filter(
                        (p) => p.applyOrderItems && p.applyOrderItems.length > 0
                    )
                    .map((item) => item.key)
            );

            // 检查每个父节点，选中所有子节点
            selection.forEach((parent) => {
                const children = parent.applyOrderItems || [];

                const childIds = children.map((child) => child.key);

                if (selectedIds.has(parent.key)) {
                    // 如果父节点被选中，则选中所有子节点
                    console.log("children1", children);
                    console.log("selectionRows1", selection);
                    if (
                        children.length > 0 &&
                        !selection.some((item) => children.includes(item))
                    ) {
                        console.log(22222);
                        children.map((row) => {
                            this.$refs.mytable.toggleRowSelection(row, true);
                            // 触发事件，传递选中的行
                            this.$emit("selection-changed", this.selectionRows);
                        });
                    }
                } else {
                    // 如果父节点未选中，取消选中所有子节点
                    children.forEach((child) => {
                        if (this.selectedRows.includes(child)) {
                            this.$refs.mytable.toggleRowSelection(child, false);
                            this.selectedRows = this.selectedRows.filter(
                                (row) => row !== child
                            ); // 更新选中的行
                        }
                    });
                }
            });

            // 去重
            this.selectedRows = Array.from(
                new Set(this.selectedRows.filter((p) => p.applyOrderItemId > 0))
            );

            console.log("selectedRows2", this.selectedRows);
        },
       
        async opBindData() {
            console.log(111);
            console.log(this.defaultQueryList);

            this.queryList = { ...this.queryList, ...this.defaultQueryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        async initOptions() {},
    },
    async mounted() {
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>
